<template>
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="用户名（或真实姓名）">
              <el-input v-model="query.name" />
            </el-form-item>
            <el-form-item label="角色">
              <el-select
                v-model="query.roleId"
                class="ipt-item w-220"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in roles"
                  :key="index+'task_type'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="项目部">
              <el-select
                v-model="query.projectDepartmentId"
                class="ipt-item w-220"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in projectDepartmentIds"
                  :key="index+'projectDepartmentId'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-button v-if="hasBtn('user:list')" type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="resetForm">重置</el-button>
            <el-button v-if="hasBtn('user:add')" type="primary" @click="handleAdd">新增</el-button>
            <el-button v-if="hasBtn('user:resetPwd')" type="primary" :disabled="resetState" @click="handleUpdatePassword">重置密码</el-button>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            ref="table"
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 300px)"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="80" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="realName" label="真实姓名" />
            <el-table-column prop="roles[0].name" label="角色" />
            <el-table-column prop="roles[0].name" label="部门">
              <template slot-scope="scope">{{ scope.row.tprojectDepartment.name }}</template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="email" label="电子邮箱" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column v-if="hasBtn('user:edit')" label="分配排口" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleUpdata(scope.row)">分配排口</el-button>
              </template>
            </el-table-column>
            <el-table-column v-if="hasBtn('user:edit')" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button v-if="scope.row.enabled" type="primary" size="small" @click="handleEnabled(scope.row)">禁用</el-button>
                <el-button v-else type="primary" size="small" @click="handleEnabled(scope.row)">启用</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
    </div>
    <AddUserFormDialog
      :dialog-visible="dialogVisible"
      :dialog-type="dialogType"
      :obj="obj"
      @flushPage="initData"
      @closeDialog="closeDialog"
    />
    <UpdatePasswordDialog
      :dialog-visible="dialogVisible_p"
      :ids="ids"
      @flushPage="initData"
      @closeDialog="closeDialog"
    />
    <OutletTree
      :dialog-visible="dialogVisible_o"
      :obj="obj"
      @flushPage="initData"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getList, update } from '@/api/system/user'
import { getRoleList } from '@/api/system/roles'
import { hasBtnPermission as hasBtn } from '@/utils/buttons'
import AddUserFormDialog from './components/AddUserFormDialog'
import UpdatePasswordDialog from './components/UpdatePasswordDialog'
import { getList as getDepartmentList } from '@/api/info/projectDepartment'
import OutletTree from './components/outletTree'

export default {
  name: 'UserPage',
  components: {
    Pagination, AddUserFormDialog, UpdatePasswordDialog, OutletTree
  },
  filters: {
    filterJobs(val) {
      if (!val || val.length === 0) return ''
      const names = val.map(item => item.name)
      return names.toString()
    }
  },
  data() {
    return {
      tableLoading: true,
      query: {
        roleId: '',
        projectDepartmentId: '',
        name: '',
        total: 0,
        page: 1,
        limit: 10
      },
      tableData: [],
      dialogVisible: false,
      dialogVisible_p: false,
      dialogVisible_o: false,
      dialogType: '',
      obj: {},
      roles: [],
      resetState: true,
      projectDepartmentIds: [],
      ids: []
    }
  },
  created() {
    this.initData()
    this.getRoles()
    // 项目部
    getDepartmentList().then(res => {
      this.projectDepartmentIds = res.data.list
    })
  },
  methods: {
    getList, getRoleList, hasBtn,
    initData() {
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      this.getList(query).then(res => {
        this.tableData = res.data.list
        this.query.total = res.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.resetState = false
      } else {
        this.resetState = true
      }
    },
    handleUpdata(row) {
      this.dialogVisible_o = true
      this.obj = row
    },
    // 新增
    handleAdd() {
      this.obj = null
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    // 修改
    handleUpdate(row) {
      this.dialogVisible = true
      this.obj = row
      this.dialogType = 'update'
    },
    // 获取角色
    getRoles() {
      this.getRoleList().then(value => {
        this.roles = value.data.obj
        // 不显示 管理员角色
        this.roles.forEach((value, index) => {
          if (value.roleType === 'e036_01') {
            this.roles.splice(index, 1)
          }
        })
      })
    },
    resetForm() {
      this.query = {
        ...this.query,
        roleId: '',
        name: ''
      }
    },
    // 启用/禁用
    handleEnabled(row) {
      const message = row.enabled === true ? '禁用' : '启用'
      this.$confirm('确定' + message + '该账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const obj = {
          'id': row.id,
          'enabled': !row.enabled,
          'username': row.username
        }
        update(obj).then(() => {
          this.$message.success('修改成功')
          this.initData()
        }).catch(() => {
          this.$message.error('修改失败')
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.dialogVisible_p = false
      this.dialogVisible_o = false
      this.ids = []
    },

    // 重置密码
    handleUpdatePassword() {
      const rows = this.$refs.table.selection
      rows.forEach(item => {
        this.ids.push(item.id)
      })
      this.dialogVisible_p = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
